<template>
  <el-container style="border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu>
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-message"></i>多tab测试</template>
          <el-menu-item @click="to('about')" index="1-1">about</el-menu-item>
          <el-menu-item @click="to('index')" index="1-2">index</el-menu-item>
          <el-menu-item @click="to('index01')" index="1-3">index01</el-menu-item>
          <el-menu-item @click="to('index02')" index="1-4">index02</el-menu-item>
          <el-menu-item @click="to('index03')" index="1-5">index03</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-tabs v-model="currentTab" type="card" editable @edit="handleTabsEdit" @tab-click="clickTo">
        <el-tab-pane
                v-for="(item, index) in list"
                :key="index"
                :label="item.label"
                :name="item.href"
        >
        </el-tab-pane>
      </el-tabs>

      <el-main>
        <keep-alive :include="includeList" :max="100">
          <router-view />
        </keep-alive>
      </el-main>
    </el-container>
  </el-container>
</template>

<style>
  .el-header {
    background-color: #e0e0e0;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>

<script>
  export default {
    data() {
      const item = {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      };
      return {
        tableData: Array(20).fill(item)
      }
    },
    methods:{
      to (name) {
        let item = {href:'/'+name,label:name,name:name}
        if (item.href !== this.currentTab) {
          this.$store.commit('updateTabListState', item)
          this.$store.commit('updateCurrentTabState', item.href)
        }
      },
      clickTo (tab) {
        let item = {href:tab.name,label:tab.label,name:tab.name}
        if (item.href !== this.currentTab) {
          this.$store.commit('updateTabListState', item)
          this.$store.commit('updateCurrentTabState', item.href)
        }
      },
      remove (href) {
        this.$store.commit('removeCurrentTabState', href)
      },
      handleTabsEdit(targetName, action) {
        if (action === 'remove') {
          this.remove(targetName)
        }
      }
    },
    watch: {
      currentTab (value) {
        console.log(value)
        this.$router.push({ path: value })
      }
    },
    computed: {
      includeList(){
        let list = this.$store.state.tabList.map(item=>{
          return item.name
        })
        return list
      },
      list () {
        return this.$store.state.tabList
      },
      currentTab: {
        get () {
          return this.$store.state.currentTab
        },
        set () {
        }
      }
    },
  };
</script>
